<script lang="ts" setup>
import LogicFlow from '@logicflow/core'
import { nextTick, onMounted, Ref, ref, watch } from 'vue'
import { BpmnElement } from './bpmn/index'

const props = defineProps({
  /**仅浏览不可编辑模式，默认不开启 */
  isSilentMode: {
    default: false,
    type: Boolean,
  },
  /**网格 */
  grid: {
    default: false,
    type: Boolean,
  },
  /**禁止拖动画布 */
  stopMoveGraph: {
    default: false,
    type: Boolean,
  },
  /**xml字符串 */
  json: {
    default: () => ({
      nodes: [],
      edges: [],
    }),
    type: Object,
  },
  /**流程名称 */
  flowName: {
    type: String,
  },
  /**流程类别 */
  flowType: {
    type: String,
  },
})
//使用自定义bpmn元素
LogicFlow.use(BpmnElement)
const containerRef = ref()
/**logicflow实例 */
const lf: Ref<LogicFlow | undefined> = ref()

const emits = defineEmits(['created'])
onMounted(() => {
  lf.value = new LogicFlow({
    container: containerRef.value,
    isSilentMode: props.isSilentMode,
    nodeTextEdit: true,
    edgeTextEdit: true,
    edgeType: 'bpmn2:sequenceFlow',
    grid: props.grid,
    stopMoveGraph: props.stopMoveGraph,
    textEdit: false,
  })
  nextTick(() => {
    lf.value?.render(props.json)
  })
  //暴露logicflow实例
  emits('created', lf.value)
})
watch(
  () => props.json,
  () => {
    lf.value?.render(props.json)
  },
  { deep: true },
)

/**导出xmlStr */
function exportXml(): { json: any } {
  return {
    json: lf.value?.getGraphRawData(),
  }
}
defineExpose({ exportXml })
</script>
<template>
  <div class="flow-box" ref="containerRef"></div>
</template>
<style scoped lang="scss">
.flow-box {
  height: 100%;
}
</style>
